<template>
  <el-dialog
    :title="formData.id ? '编辑班级': '添加班级'"
    :visible.sync="showDialog"
    width="50%"
    @close="closeFn"
  >
    <el-form ref="classForm" label-width="100px" :model="formData" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="归属学科" prop="subject_id">
            <el-select v-model="formData.subject_id" placeholder="归属学科" clearable>
              <el-option v-for="item in subjectInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="授课老师">
            <!-- v-if="!formData.id" -->
            <el-select v-model="formData.teacher_info" :multiple="true" :collapse-tags="true" placeholder="请选择" clearable @change="selectFn">
              <el-option
                v-for="(item,index) in teacherList"
                :key="index"
                :label="item.username"
                :value="item.user_id"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="班主任老师">
            <el-select v-model="formData.manager_info" multiple placeholder="请选择" collapse-tags clearable>
              <el-option
                v-for="(item,index) in managerList"
                :key="index"
                :label="item.username"
                :value="item.user_id"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="formData.sort" style="width:70%" :min="1" :max="50" label="描述文字" clearable @change="handleChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级名称" prop="class_name">
            <el-input v-model="formData.class_name" style="width:95%" clearable placeholder="请输入班级名称" />
          </el-form-item>
          <el-form-item label="助教老师">
            <el-select v-model="formData.zhujiao_info" multiple placeholder="请选择" collapse-tags clearable>
              <el-option
                v-for="(item,index) in zhujiaoList"
                :key="index"
                :label="item.username"
                :value="item.user_id"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="开始结课日期">
            <el-date-picker
              v-model="dateArr"
              style="width:95%"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="班级状态">
            <el-switch
              v-model="state"
              active-text="正常"
              inactive-text="关闭"
              @change="changeFn"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addClass, editState } from '@/api/class'
import { mapGetters } from 'vuex'
export default {
  name: 'ClassNode',
  props: {
    classInfo: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      state: '',
      // clearState: true,
      dateArr: [],
      showDialog: false,
      managerList: [],
      teacherList: [],
      zhujiaoList: [],
      // subjectInfo: [],
      formData: {
        sort: 10
      },
      rules: {
        subject_id: [{ required: true, message: '请选择学科!', trigger: 'blur' }],
        class_name: [{ required: true, message: '班级名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['subjectInfo'])
  },
  created() {
    console.log(this.classInfo)
  },

  methods: {
    selectFn(val) {
      console.log(val + 1111)
    },
    handleChange() {},
    // 弹层关闭事件
    closeFn() {
      this.formData = { sort: 10 }
      this.dateArr = []
      this.$refs.classForm.resetFields()
    },
    // 提交事件
    async btnOk() {
      const arr = []
      this.formData.teacher_info.forEach(item => {
        arr.push(...this.teacherList.filter(val => val.user_id === item))
      })
      this.formData.teacher_info = arr // 重新赋值讲师表单数据

      const arr1 = []
      this.formData.manager_info.forEach(item => {
        arr1.push(...this.managerList.filter(val => val.user_id === item))
      })
      this.formData.manager_info = arr1 // 重新赋值班主任表单数据

      const arr2 = []
      this.formData.zhujiao_info.forEach(item => {
        arr2.push(...this.zhujiaoList.filter(val => val.user_id === item))
      })
      this.formData.zhujiao_info = arr2 // 重新赋值助教表单数据

      console.log(this.formData)
      const messsage = this.formData.id ? '编辑成功' : '新增成功'

      await this.$refs.classForm.validate()
      if (this.formData.id) {
        // 编辑
        await editState({ ...this.formData, start_time: this.dateArr[0], end_time: this.dateArr[1] })
      } else {
        // 添加
        await addClass({ ...this.formData, state: this.state ? 1 : 2, start_time: this.dateArr[0], end_time: this.dateArr[1] })
      }
      console.log('132312312312')
      console.log(this.formData)
      this.showDialog = false
      this.$message.success(messsage)
      this.$parent.$parent.getClassInfo()
    },
    // 处理班主任数据
    getManagerList(classInfo) {
      const arr = []
      classInfo.forEach(item => {
        return arr.push(...JSON.parse(item.manager_info) || '')
      })
      const newArr = []
      arr.forEach(item => {
        newArr.push(item)
        return newArr
      })
      var hash = {}
      const finaArr = Array.from(new Set(newArr)).reduce(function(item, next) {
        hash[next.username] ? '' : hash[next.username] = true && item.push(next)
        return item
      }, [])
      this.managerList = finaArr
    },
    // 处理讲师数据
    getTeacherList(classInfo) {
      const arr = []
      classInfo.forEach(item => {
        return arr.push(...JSON.parse(item.teacher_info) || '')
      })
      const newArr = []
      arr.forEach(item => {
        newArr.push(item)
        return newArr
      })
      var hash = {}
      const finaArr = Array.from(new Set(newArr)).reduce(function(item, next) {
        hash[next.username] ? '' : hash[next.username] = true && item.push(next)
        return item
      }, [])
      this.teacherList = finaArr
    },
    // 处理助教数据
    getZhujiaoList(classInfo) {
      const arr = []
      classInfo.forEach(item => {
        return arr.push(...JSON.parse(item.zhujiao_info) || '')
      })
      const newArr = []
      arr.forEach(item => {
        newArr.push(item)
        return newArr
      })
      var hash = {}
      const finaArr = Array.from(new Set(newArr)).reduce(function(item, next) {
        hash[next.username] ? '' : hash[next.username] = true && item.push(next)
        return item
      }, [])
      this.zhujiaoList = finaArr
    },
    changeFn(newVal) {
      this.state = newVal
    }
  }
}
</script>

<style>

</style>
